<template>
    <div class="content">
        <!-- 顶部搜索区 -->
        <el-row>
            <el-col :span="24">
                <el-form :inline="true" :model="page" class="form-inline" @submit.native.prevent>
                    <el-form-item label="服务ID">
                        <el-input clearable size="mini" type="number"   v-model="page.id" placeholder="服务ID" @keyup.enter.native="getList"></el-input>
                    </el-form-item>
                    <el-form-item label="服务类型">
                        <el-select clearable  size="mini"   v-model="page.type" placeholder="请选择服务类型">
                            <el-option label="服务" :value="0"></el-option>
                            <el-option label="颜值兑换商品" :value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="创建时间">
                        <el-date-picker 
                            clearable  
                            size="mini"   
                            v-model="pickTime" 
                            type="datetimerange" 
                            :picker-options="pickerOptions" 
                            @change="datePick" 
                            range-separator="至" 
                            start-placeholder="开始日期" 
                            end-placeholder="结束日期" 
                            align="left" 
                            value-format="yyyy-MM-dd HH:mm:ss"  
                            style="width: 350px;"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="mini" type="primary" @click="init">重置</el-button>
                        <el-button size="mini" type="primary" @click="getList">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

        <!-- 主体内容 -->
        <el-row>
            <!-- 选择项 -->
            <el-col :span="24">
                <div class="fox-row">
                    <el-button-group>
                        <el-button
                           size="mini"  
                           :type="page.status === i?'primary':''"
                           :key="i"
                           v-for="(item,i) in search_status"
                        >{{item.label}}
                        </el-button>
                    </el-button-group>
                </div>
            </el-col>
            <el-col :span='24'>
                <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                    <el-table-column
                        align="center" 
                        type="selection"
                        width="55">
                    </el-table-column>
                    <el-table-column
                        align="center" 
                        prop="date"
                        label="日期"
                    >
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="name"
                        label="姓名"
                   >
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="province"
                        label="省份"
                   >
                    </el-table-column>
                    <el-table-column
                    prop="city"
                    label="市区"
                   >
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="address"
                        label="地址"
                   >
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="zip"
                        label="邮编"
                   >
                    </el-table-column>
                    <el-table-column
                        align="center"
                        fixed="right"
                        label="操作"
                        width="160">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                    </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span='24'>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 15, 20]" :current-page.sync="page.page" :page-size="page.page_size" layout="total, sizes, prev, pager, next, jumper" :total="page.total" class="pagination"></el-pagination>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name:'good_index',
    data() {
        return {
            multipleSelection:[],//表格选中数组
            search_status:[
                {
                    label:'全部',
                    value:0
                },
                {
                    label:'待付款',
                    value:2
                }
            ],
            tableData:[
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                },
            ],
            page:{
                id:'',
                type:'',
                status:0,
                start_time:'',
                end_time:'',
                page:1,
                total:0,
                page_size:10,
            },
            pickTime: null,
            pickerOptions: {
                shortcuts: [
                {
                    text: "最近一小时",
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 1);
                    picker.$emit("pick", [start, end]);
                    }
                },
                {
                    text: "最近六小时",
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 6);
                    picker.$emit("pick", [start, end]);
                    }
                },
                {
                    text: "最近一天",
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24);
                    picker.$emit("pick", [start, end]);
                    }
                },
                {
                    text: "最近三天",
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
                    picker.$emit("pick", [start, end]);
                    }
                },
                {
                    text: "最近一周",
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit("pick", [start, end]);
                    }
                }
                ]
            },
        }
    },
    methods:{
        // 表单重置
        init(){
           Object.assign(this.$data.page, this.$options.data().page)
           this.pickTime = [];
           this.getList();
        },
        
        // 列表查询
        getList(){
            console.log(this.page)
        },

        // 选中
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        // 分页
        handleSizeChange(val){
            this.page.page_size = val;
            this.getList();
        },

        // 分页
        handleCurrentChange(val){
            this.page.page = val;
            this.getList();
        },

        // 选择时间区间
        datePick() {
            if (!this.pickTime) {
                this.page.start_time = "";
                this.page.end_time = "";
                return;
            }
            this.page.start_time = this.pickTime[0]
            this.page.end_time = this.pickTime[1]
        },

        // 按钮点击
        handleClick(){
            this.$router.push({
                name:'order_detail',
                query:{
                    id:2
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .content{
        .fox-row{
            @include flexbox();
            @include padding(0,0,20,0);
        }
    }
</style>